header{
  height: 20px;
  font-size:1.1em;
  h1,li,a{
    text-transform: uppercase;
    display: block;
    line-height: 20px;
    float: left;
  }
  h1,li{
    margin-right:20px;
  }
  h1{
    a{
      width: 260px;
    }
  }
  ul{
    width:auto;
  }


  li{
    color: #999999;
    height: 19px;
    position: relative;
    a{
      display: block;
      height:100%;
      width:120px;
      float: left;
      transition: color .5s ease;
      &:after{
        content: ' ';
        display: block;
        position: absolute;
        left: 0;
        top: 100%;
        margin-top: 0px;
        background: #999;
        height: 3px;
        width:0;
        transition:.3s ease-in-out;
      }
      &:hover{
        color: #000;
        &:after{
          width: 45px;
        }
      }
    }
    &.selected{
      color:#000;
      font-family: $font-text-bold;
      a:after{
        background: #000;
        width: 45px;
      }
    }
  }
  h1{
    font-family: $font-text;
    //
    strong{
      font-family: $font-text-bold;
    }
  }
  border-bottom: solid 1px #999999;
  &.interactive{
    li a:after{
      display: none;
    }

  }
  .header-bar {
    width: 45px;
    height: 3px;
    background: #000;
    margin-top:19px;
    position:absolute;
    //transition: .5s ease-in-out .2s;
  }
}

@media #{$small-width}{
  header{
    height:auto;
    position: fixed;
    background: #fff;
    float: left;
    z-index: 1;
    top:0;
    padding-top: 20px;
    h1{
      width:100%;
    }
    &:after{
      content:' ';
      display: block;
      width:100%;
      clear: both;
    }
    ul{
      float: left;
    }
  }
}

@media screen and (max-width:960px){
  header{
    li {
      a{
        width: auto;
        min-width: 50px;
      }
    }
    h1{
      a{
        width: 200px;
      }
    }
  }
}